let id1;//公共id
let page = 1;//当前页面页码为1
//dom已经加载完成
$(document).ready(function () {
    disPlayData(product);//初始化数据
    addProduct();//添加数据
    delProduct();//删除数据
    editProduct();//修改数据
    resetData();//重置数据
    refreshFn();//刷新（重新渲染数据）
})
//显示数据
function disPlayData(arr) {
    //每次渲染数据前先清空tbody里面的数据
    $(".tbContent").html('');
    console.log(arr);
    //根据数据长度返回选定的数据，返回一个新数组
    let paginationArr = arr.slice((page - 1) * 5, page * 5);//0-5  0,1,2,3,4
    for (let i = 0; i < paginationArr.length; i++) {
        let oTr = document.createElement("tr");
        oTr.innerHTML = `
        <td>${i + 1}</td>
        <td>${paginationArr[i].name}</td>
        <td>${paginationArr[i].id}</td>
        <td>${paginationArr[i].unit_price}</td>
        <td>${paginationArr[i].specifications}</td>
        <td>${paginationArr[i].remarks}</td>
        <td><button class="editBtn" data-toggle="modal" data-target="#editModal" data-index="${paginationArr[i].id}">编辑</button>
        <button class="delBtn" data-toggle="modal" data-target="#delModal" data-index="${paginationArr[i].id}">删除</button></td>
        `;
        $(".tbContent").append(oTr);
    }
    pagination(arr);
    searchData();
    asyncLocalStory("product");
}
//显示分页
function pagination(arr) {
    $(".changePage").children().html('');
    //根据数据的长度重新创建页码
    let str = '';
    for (let i = 1; i <= Math.ceil(arr.length / 5); i++) {
        //创建页码li
        if (i == page) {
            //如果li和当前的页码一致，给他加一个选中的class
            str += `<li class="active"><a class="pageBtn" href="#">${i}</a></li>`;
        } else {
            str += `<li><a class="pageBtn" href="#">${i}</a></li>`;
        }
    }
    $(".changePage").html(`<li class=""><a href="#" class="prev"><span class="navigation">&laquo;</span></a></li>${str}<li class=""><a href="#" class="next"><span class="navigation">&raquo;</span></a></li>`);
}
//给分页添加点击事件
$(".changePage").on("click", function (e) {
    if (e.target.className == "pageBtn") {
        page = e.target.innerHTML;
        disPlayData(product);
    }
});

//给上一页加事件
$(".changePage").on("click", ".prev", function () {
    if (page > 1) {
        page--;
        disPlayData(product);
    }
});
//给下一页加事件
$(".changePage").on("click", ".next", function () {
    if (page < Math.ceil(staff.length / 5)) {
        page++;
        disPlayData(product);
    }
});
//添加数据
function addProduct() {
    $(".addSaveBtn").on("click", function () {
        let id = 0;
        //id自增
        for (let i = 0; i < product.length; i++) {
            if (id < product[i].id) {
                id = product[i].id;
            }
        }
        id++
        let gongHao = {
            id: id,
            name: $(".addName").val(),
            unit_price: $(".addPrice").val(),
            specifications: $(".addGuiGe").val(),
            remarks: $(".addRemarks").val()
        }
        product.push(gongHao);
        $("#addModal").modal("hide");
        $(".addName").val('');
        $(".addPrice").val('');
        $(".addGuiGe").val('');
        $(".addRemarks").val('');
        asyncLocalStory("product");
        disPlayData(product);
    })
}
//删除数据
function delProduct() {
    $(".tbContent").on("click", "button", function (e) {
        id1 = $(e.target).attr("data-index");
    })
}
$(".deleteBtn").on("click", function () {
    for (let i = 0; i < product.length; i++) {
        if (product[i].id == id1) {
            product.splice(i, 1);
            break;
        }
    }
    $("#delModal").modal("hide");
    page = 1;
    asyncLocalStory("product");
    disPlayData(product);
})
//修改数据
function editProduct() {
    $("#editSure").click(function () {
        for (let i = 0; i < product.length; i++) {
            if (product[i].id == id1) {
                product[i].name = $(editName).val();
                product[i].unit_price = $(editPrice).val();
                product[i].specifications = $(editGuiGe).val();
                product[i].remarks = $(editRemarks).val();
            }
        }
        $("#editModal").modal("hide");
        $(editName).val('');
        $(editPrice).val('');
        $(editGuiGe).val('');
        $(editRemarks).val('');
        asyncLocalStory("product");
        disPlayData(product);
    })
}

//查询
function searchData() {
    $(".searchBtn").on("click", function () {
        let str1 = $(".inpName").val();
        let str2 = $(".inpId").val();
        let data1 = [];
        let data2 = [];
        if (str1.trim() == '') {
            data1 = product;
        } else {
            for (let i = 0; i < product.length; i++) {
                if (product[i].name == str1) {
                    data1.push(product[i]);
                }
            }
        }
        console.log("data1", data1);
        if (str2.trim() == '') {
            data2 = data1;
        } else {
            for (let i = 0; i < data1.length; i++) {
                if (data1[i].id == str2) {
                    data2.push(data1[i]);
                }
            }
        }
        console.log("data2", data2);
        page = 1;
        disPlayData(data2);
    })
}

//重置
function resetData() {
    $(".resetBtn").on("click", function () {
        $(".inpName").val('');
        $(".inpId").val('');
        disPlayData(product);
    })
}
//刷新
function refreshFn() {
    $(".headBtn3").on("click", function () {
        location.reload();
    })
}
